<template>
  <div class="container">
    <div class="head-bar">
      <div class="head-box">
        <!-- 快递配送方式的样式 -->
        <div
          class="head-content head-content-post border-radius-10"
          ref="address" @click="chooseAddress">
          <div class="flex flex-between">
            <div class="left-box">
              <div v-if="!addressNameStr" class="flex v-align-c">
                <img
                  v-if="fileSpace"
                  class="width-12 height-12 mar-r-6"
                  :src="fileSpace + '/images/icon-corss-add.png'" alt="">
                <span class="font-18 font-w font-color-total">新建收货地址</span>
              </div>
              <div class="font-18 font-w font-color memberinfo">
                <span class="label-ad-sp mar-t-7">
                  <span
                    v-if="memberInfo.addressLabel"
                    class="font-11 width-30 height-15 flex flex-center mar-r-10 font-normal"
                    :class="'label-'+ memberInfo['labelStyle']">
                    <span>{{memberInfo.addressLabel}}</span>
                  </span>
                </span>
                <span>{{addressNameStr}}{{memberInfo.communityName}}{{memberInfo.houseNum}}</span>
              </div>
              <div v-if="addressNameStr" class="font-15 mar-t-3 memberinfo">
                <span>{{memberInfo.receiverName}}</span>
                <span class="mar-l-6">{{memberInfo.receiverPhone}}</span>
              </div>
            </div>
            <div class="right-box">
              <icon
                :class="addressNameStr ? '' : 'font-color-total'"
                class="iconfont icon-arrow-right icon-next-a mar-t-1 mar-r--1 font-16"></icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-if="addressTips">
      <div class="head-layer-content" :class="'head-' + type">
        <img class="head-arrow width-30 height-50" v-if="fileSpace" :src="fileSpace + '/images/arror-top.png'" alt="">
        <p class="font-14 font-w font-white pad-t-8 pad-b-10">点击这里快递设置收货地址</p>
        <div class="apply-dialog">
          <div class="apply-dialog-info" :class="modal.contentSmall ? 'content-small' : ''" v-html="modal.content"></div>
          <div class="flex bottom-btn">
            <div v-if="modal.cancel" class="flex-item cancel-btn" @click="addressTips = false">{{ modal.cancel }}</div>
            <div v-if="modal.cancel && modal.confirm" class="border-line"></div>
            <div
              v-if="modal.confirm"
              class="flex-item submit-btn"
              :class="modal.confirmActive ? 'submit-apply' : ''"
              @click="showConfirm(modal.confirmType)">{{ modal.confirm }}</div>
          </div>
        </div>
      </div>
      <div class="head-layer-bg"></div>
    </template>
    <div v-if="crossBorderType === 2" class="panel-cb-pl">
      <div class="flex v-align-c pad-b-2">
        <img class="width-15 height-13 mar-r-6" v-if="fileSpace" :src="fileSpace + '/images/icon-codeid-s.png'" alt="">
        <div class="font-13 c-cb-wr">跨境商品需提供付款人信息用以办理清关手续</div>
      </div>
      <div class="pad-l-21 font-15">
        <template v-if="memberInfo.isOpenCertificateInfo">
          <span class="mar-r-21">{{ memberInfo.certificateRealName }}</span>
          <span>{{ memberInfo.certificateNumber }}</span>
        </template>
        <div v-else class="flex v-align-c" @click="chooseCertificate">
          <div class="flex-item">请完善付款人证件信息</div>
          <icon class="iconfont icon-arrow-right icon-next-a mar-t-1 font-16"></icon>
        </div>
      </div>
    </div>
    <div class="shop-bar bg-color-white pad-15 mar-t-10">
      <div v-if="resData.company"
        class="biz-title font-13 pad-b-7 mar-l--15 mar-r--15 mar-b-12 mar-t--8 pad-l-15 pad-r-15">{{ resData.company }}</div>
      <div class="shop-list" v-for="(item, index) in listData" :key="index">
        <div class="order-row mar-b-12 flex">
          <div class="img-box mar-r-12 pos-rel">
            <!-- 跨境图标 -->
            <div class="cross-border-pic">
              <!-- 跨境保税 -->
              <img
                v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 1"
                :src="fileSpace + '/images/icon-cross-border-s.png'"
                class="icon-cross-border cross-s"
                alt="">
              <!-- 海外直邮 -->
              <img
                v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 2"
                :src="fileSpace + '/images/icon-cross-border-s-22.png'"
                class="icon-cross-border cross-s"
                alt="">
            </div>
            <img v-if="item.goodsImageUrl" :src="item.goodsImageUrl" alt="" class="width-80 height-80">
          </div>
          <div class="shop-title font-15 mar-t-5 flex-item">
            <span class="taobao-icon" v-if="item.goodsSource === 2">淘</span>
            <span>{{item.title}}</span>
          </div>
        </div>
        <div class="sku-detail pad-l-10 pad-r-10 pad-t-6 pad-b-6"
          v-for="(itemSub, indexSub) in item.shoppingCartList" :key="indexSub">
          <div class="flex v-align-c">
            <div class="flex-item">
              <div class="font-color-6 font-12">{{itemSub.skuDetail}}</div>
              <!-- 多规格 -->
              <div v-if="item.skuFlag === 1">
                <div class="font-color-6 font-12 flex v-align-c"  v-if="itemSub.deliverySupportFlag === 1">
                  <span>￥{{itemSub.wholesalePrice}}</span>
                  <span class="pad-l-2 pad-r-2">/</span>
                  <span>{{ item.unit ? item.unit : '件' }}</span>
                </div>
                <div class="hint-box" v-else>
                  <span>当前收货地址不支持配送该商品</span>
                </div>
              </div>
              <!-- 单规格 -->
              <div v-if="item.skuFlag === 0">
                <div class="font-color-6 font-12 flex v-align-c"  v-if="item.deliverySupportFlag === 1">
                  <span>￥{{itemSub.wholesalePrice}}</span>
                  <span class="pad-l-2 pad-r-2">/</span>
                  <span>{{ item.unit ? item.unit : '件' }}</span>
                </div>
                <div class="hint-box" v-else>
                  <span>当前收货地址不支持配送该商品</span>
                </div>
              </div>
            </div>
            <div class="font-15">
              <!-- 单规格 -->
              <div v-if="item.skuFlag === 0">
                <span v-if="item.deliverySupportFlag === 1">×{{itemSub.goodsNum}}</span>
                <span @click="deleteGoods(itemSub)" v-else style="color: #fff; width: 30rpx; height: 30rpx; background: #aaa; border-radius: 50%; display: flex; justify-content: center;align-items: center;">×</span>
              </div>
              <!-- 多规格 -->
              <div v-else>
                <span v-if="itemSub.deliverySupportFlag === 1">×{{itemSub.goodsNum}}</span>
                <span @click="deleteGoods(itemSub)" v-else style="color: #fff; width: 30rpx; height: 30rpx; background: #aaa; border-radius: 50%; display: flex; justify-content: center;align-items: center;">×</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="total-info bg-color-white mar-t-10 pad-l-15 pad-r-15 font-15">
      <div class="flex v-align-c pad-t-8 pad-b-8" style="justify-content: space-between;" v-if="showCel">
        <div>送货上门</div>
        <div style="font-size:24rpx;color:#636660" v-if="!showSwitch">您当前的收货地址暂不支持送货上门</div>
        <div v-else>
          <van-switch active-color="#FF713A" inactive-color="#F3F3F3" :checked="switchChecked" @change="changeSwitch" size="24px"/>
        </div>
      </div>
    </div>
    <div class="total-info bg-color-white mar-t-10 pad-l-15 pad-r-15 font-15">
      <div class="flex v-align-c pad-t-8 pad-b-8">
        <div>留言</div>
        <input style="width:75%;" v-model="memberInfo.comment"
          class="mar-l-25 flex-item text-align-r" maxlength="50" placeholder="50字以内 (选填)" />
      </div>
    </div>
    <div class="bg-color-white mar-t-10 mar-b-10 pad-l-15 pad-r-15 pad-t-9 pad-b-9 font-15">
      <div class="flex v-align-c">
        <span class="font-color-bo font-12">货品总计：</span>
        <span class="flex-item font-12">¥ {{ totalAmount }}</span>
        <label class="font-14">共{{ totalType }}种{{ totalNum }}件</label>
      </div>
      <div class="flex v-align-c">
        <span class="font-color-bo font-12">运费总计：</span>
        <span class="flex-item font-12">{{ freight === '0.00' ? '免运费' : '¥ ' + freight }}</span>
      </div>
      <div v-if="crossBorderType === 2 || (resData.taxAmount * 1 > 0)" class="flex v-align-c">
        <span class="font-color-bo font-12">税费：</span>
        <span class="flex-item font-12">¥{{ resData.taxAmount }}</span>
      </div>
    </div>
    <div class="hint-bottom-box" v-if="notSupportNum !== 0">
      有<span>{{notSupportNum}}</span>款商品不支持配送,未被计算
    </div>
    <div class="height-50"></div>
    <div class="total-bar flex v-align-c">
      <div class="flex-item mar-r-15">
        <div class="font-12 flex v-align-c">
          <span class="font-color-6 flex-item text-align-r">应付总额(含运费)：</span>
          <div class="font-red">
            <span>￥</span>
            <span>{{ totalPrice }}</span>
          </div>
        </div>
      </div>
      <button class="confirm-btn" @click="payBtnEvent" :disabled="notSupportNum" :style="{background: !notSupportNum ? 'linear-gradient(to right, #ff8e4b, #ff4e25)' : '#dddddd'}">
        提交订单
      </button>
    </div>
  </div>
</template>

<script>
  import {
    submitOrder,
    getWholesaleCheckOrder
  } from '@/api/shop'
  import { getAddress } from '@/api/address'
  import GetFormId from '@/components/GetFormId'
  import { throttle } from '@/utils'

  export default {
    components: { GetFormId },
    data() {
      return {
        address: '',
        addressNameStr: '',
        memberInfo: {
          addressId: '',
          receiverName: '',
          receiverPhone: '',
          addressName: '',
          address: '',
          comment: ''
        },
        sellerInfo: {},
        resData: {},
        goods: {
          goodsId: '',
          goodsNum: 1,
          skuId: '',
          skuDetail: ''
        },
        shareSkuDetail: '',
        goodsType: null,
        freight: '0.00',
        listData: [],
        isCart: false,
        cartIds: [],
        submitStatus: false,
        totalPrice: 0,
        skuList: [],
        totalType: 0,
        totalNum: 0,
        totalAmount: 0,
        notSupportNum: 0, // 有几款商品不支持配送
        showSwitch: false, // 是否支持送货上门
        switchChecked: false, // 是否开启送货上门
        btnDisabled: false, // 提交订单按钮是否禁用
        homeSupportFlag: 0,
        homeFlag: '', // 是否选择了送货上门
        showCel: true, // 是否显示送货上门
        crossBorderType: null,
        addressTips: false,
        andType: false,
        modal: {}
      }
    },
    onLoad() {
      // console.log(21)
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {
      this.submitStatus = false
      this.modal = {
        content: '<p>您当前没有任何收货地址信息</p><p>是否前往设置收货地址？</p>',
        cancel: '取消',
        confirm: '立即前往',
        confirmActive: true,
        confirmType: 1
      }
      if (this.$pt.getStorageSync('addressId')) {
        this.addressTips = false
        this.addressGetEls(this.$pt.getStorageSync('addressId'))
        this.initMemberInfo()
      }
      // 清楚证件信息拷贝缓存设置
      this.$pt.removeStorageSync('copyRealInfo')
    },
    onHide() {
      this.$pt.removeStorageSync('addressId')
    },
    onUnload() {
      this.$pt.removeStorageSync('addressId')
    },
    mounted() {
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      if (sysInfo.system.indexOf('iOS') === -1) {
        // android类型
        this.andType = true
      } else {
        this.andType = false
      }
      this.$pt.showLoading({
        title: '加载中',
        mask: true
      })
      this.initShoppingCart()
      this.initMemberInfo()
      setTimeout(() => {
        this.$pt.hideLoading()
      }, 1000)
    },
    methods: {
      // 点击删除 不支持配送的 商品
      deleteGoods(goods) {
        let index = this.cartIds.indexOf(goods.cartId)
        if (index > -1) {
          this.cartIds.splice(index, 1)
        }
        if (this.cartIds.length) {
          this.initMemberInfo()
        } else {
          this.$pt.navigateBack({detail: -1})
        }
      },
      changeSwitch(detail) {
        this.switchChecked = !this.switchChecked
        this.homeSupportFlag = this.switchChecked ? 1 : 0
        this.homeFlag = this.switchChecked ? 1 : 0
        this.initMemberInfo()
      },
      addressGetEls(addressId) {
        getAddress(addressId).then((response) => {
          if (response.isError) return
          this.memberInfo.addressId = addressId
          this.$pt.removeStorageSync('addressId')
          // this.memberInfo.receiverName = response.data.receiverName
          // this.memberInfo.receiverPhone = response.data.receiverPhone
          // this.address = response.data.addressName + ' ' + response.data.address
          this.initMemberInfo()
        }).catch(() => {
        })
      },
      initMemberInfo() {
        let fromType = 0
        if (this.getCurrentPage().query.goodsType) {
          this.goodsType = Number(this.getCurrentPage().query.goodsType)
        }
        if (this.getCurrentPage().query.skuList) {
          this.skuList = JSON.parse(this.getCurrentPage().query.skuList)
        }
        // goodsType 商品类型 30: 零售商品 31: 批发商品 32: 零售+批发商品
        if (this.isCart) {
          fromType = 3
          this.skuList = []
        } else if (this.goodsType === 32) {
          fromType = 1
        } else if (this.goodsType === 31) {
          fromType = 2
        }
        // fromType 核对页面来源(1.商品详情页 2.分销商品详情页 3.购物车)
        let _addressId = this.$pt.getStorageSync('addressId') || this.memberInfo.addressId
        let params = {
          fromType: fromType,
          memberId: this.getShowBuyCard ? this.getCustomerId : this.getMemberId,
          customerId: this.getShowBuyCard ? this.getCustomerId : this.getMemberId,
          cartIds: this.cartIds,
          goodsId: this.getCurrentPage().query.goodsId,
          projectGoodsSkuList: this.skuList,
          addressId: _addressId,
          homeFlag: this.homeFlag
        }
        // console.log('params', params)
        getWholesaleCheckOrder(params).then((response) => {
          if (response.isError) return
          if (response.data.address) {
            this.memberInfo = response.data.address
            if ('addressLabel' in this.memberInfo) {
              let label = ''
              switch (this.memberInfo.addressLabel) {
                case '公司':
                  label = 1
                  break
                case '家':
                  label = 2
                  break
                case '其他':
                  label = 3
                  break
                case '学校':
                  label = 4
                  break
              }
              this.memberInfo.labelStyle = label
            }
          }
          if ('addressName' in this.memberInfo) {
            this.addressNameStr = this.memberInfo.addressName.replace(/\s*/g, '')
            this.address = this.addressNameStr + ' ' + this.memberInfo.address
          }
          this.resData = response.data
          this.listData = response.data.projectGoodsList
          if (this.listData.length && this.listData[0].crossBorderType === 2) {
            this.crossBorderType = 2
          } else {
            this.crossBorderType = null
          }
          this.freight = response.data.postFee
          // 是否支持上门送货
          if (!('homeSupportFlag' in response.data)) {
            this.showSwitch = false
          } else {
            this.showSwitch = response.data.homeSupportFlag
            this.showCel = !(response.data.homeSupportFlag === 2)
          }
          // 货品总价（不包含运费）
          let totalAmount = 0
          this.notSupportNum = 0
          this.listData.forEach(item => {
            // 判断商品是 单规格:0 还是多规格:1
            if (item.skuFlag === 0) {
              // 判断送货地址是否支持配送
              if (item.deliverySupportFlag === 1) {
                item.shoppingCartList.forEach(subItem => {
                  totalAmount += subItem.goodsNum * Number(subItem.wholesalePrice)
                })
              } else {
                this.notSupportNum++
              }
            } else if (item.skuFlag === 1) {
              item.shoppingCartList.forEach(subItem => {
                if (subItem.deliverySupportFlag === 1) {
                  totalAmount += subItem.goodsNum * Number(subItem.wholesalePrice)
                } else {
                  this.notSupportNum++
                }
              })
            }
          })
          this.totalAmount = parseInt(totalAmount * 100) / 100
          // 订单总价
          let totalPrice = 0
          this.totalNum = 0
          totalPrice = Number(this.freight) + this.totalAmount
          if (this.crossBorderType === 2) {
            totalPrice = Number(this.freight) + Number(this.resData.taxAmount) + this.totalAmount
          }
          this.totalPrice = parseInt(totalPrice * 100) / 100
          this.totalType = this.listData.length
          this.listData.forEach(item => {
            item.shoppingCartList.forEach(subitem => {
              this.totalNum += Number(subitem.goodsNum)
            })
          })
          this.addressTipsEls()
          this.$pt.removeStorageSync('certificateSelect')
          if (this.memberInfo && this.crossBorderType === 2 && !this.memberInfo.isOpenCertificateInfo && (!this.memberInfo.certificateRealName || !this.memberInfo.certificateNumber)) {
            this.notSupportNum = 1
          }
        }).catch(() => {
        })
      },
      showConfirm(val) {
        if (val === 1) {
          this.chooseAddress()
        }
      },
      addressTipsEls() {
        if ('addressName' in this.memberInfo) {
          this.addressTips = false
        } else {
          this.addressTips = true
        }
      },
      initShoppingCart() {
        const strCartIds = this.getCurrentPage().query.cartIds
        // const strCartIds = '1252533501043404802,1252838479540654085,1252866804179193873,1252866804179193874'
        // const strCartIds = '1253593538151239681'
        // console.log(strCartIds)
        if (strCartIds) {
          strCartIds.split(',').forEach((item) => {
            if (item) this.cartIds.push(item)
          })
        }
        // console.log('购物车cardIds', this.cartIds)
        if (this.cartIds.length === 0) {
          return false
        } else {
          this.isCart = true
        }
      },
      payBtnEvent() {
        throttle(this.submitOrder, 1000)
      },
      submitOrder() {
        if (!this.getShowBuyCard) return
        this.$pt.removeStorageSync('pageBuyFrom')
        if (this.submitStatus) {
          return
        }
        this.submitStatus = true
        // 判断是否为快递配送方式下提交的订单
        this.memberInfo.address = this.address
        if (!this.memberInfo.address) {
          this.$utils.showToast({ title: '收货地址不能为空' })
          this.submitStatus = false
          return
        }
        let goodsList = []
        // let projectGoodsList = []
        this.listData.forEach((item) => {
          item.shoppingCartList.forEach(subitem => {
            // 判断下单页面来源
            goodsList.push({
              goodsId: subitem.goodsId,
              goodsNum: Number(subitem.goodsNum),
              skuId: subitem.skuId ? subitem.skuId : ''
            })
          })
        })
        const deliveryType = 1
        const params = {
          memberId: this.getShowBuyCard ? this.getCustomerId : this.getMemberId,
          customerMemberId: this.getShowBuyCard ? this.getCustomerId : this.getMemberId,
          customerNickname: this.memberInfo.receiverName,
          customerPhone: this.memberInfo.receiverPhone,
          customerAddress: this.memberInfo.address,
          addressId: this.memberInfo.addressId,
          customerComment: this.memberInfo.comment,
          cartIds: this.cartIds,
          goodsList: goodsList,
          deliveryType: deliveryType,
          // projectGoodsList: projectGoodsList,
          homeFlag: this.homeFlag // 是否选择了送货上门
        }
        submitOrder(params).then((response) => {
          if (response.isError) {
            this.submitStatus = false
            return
          }
          const that = this
          const payParams = response.data
          // console.log(payParams)
          // 判断是否开启线下支付功能，如果开启则跳转到收银台页，如果关闭直接走微信付款
          if (payParams.wholesaleOfflinePay) {
            that.$pt.navigateTo({url: `/pages/shop/counter/main?orderId=${payParams.orderId}`})
            return
          }
          that.$pt.requestPayment(
            {
              'timeStamp': payParams.timeStamp,
              'nonceStr': payParams.nonceStr,
              'package': payParams.package,
              'signType': payParams.signType,
              'paySign': payParams.paySign,
              'success': function(res) {
                that.$pt.redirectTo({url: '/pages/shop/result/main?successFlag=1&price=' + that.totalPrice +
                      '&orderId=' + payParams.orderId})
                that.submitStatus = false
              },
              'fail': function(res) {
                that.$pt.redirectTo({url: '/pages/shop/result/main?successFlag=0&price=' + that.totalPrice +
                      '&orderId=' + payParams.orderId})
              }
            })
        }).catch(() => {
        })
      },
      chooseAddress() {
        if (!this.getShowBuyCard) return
        this.$pt.setStorageSync('pageBuyFrom', true)
        this.$pt.navigateTo({url: '/pages/personal/address/main'})
      },
      chooseCertificate() {
        if (this.memberInfo && this.memberInfo.addressName) {
          this.saveAddress(this.memberInfo)
        } else {
          this.chooseAddress()
        }
      },
      saveAddress(address) {
        this.$pt.setStorageSync('addressDetail', true)
        this.$pt.setStorageSync('certificateSelect', true)
        let addressData = {
          addressId: address.addressId,
          defaultFlag: address.defaultFlag || '',
          communityName: address.communityName,
          receiverName: address.receiverName,
          receiverPhone: address.receiverPhone,
          address: address.address,
          houseNum: address.houseNum || '',
          provinceName: address.provinceName,
          cityName: address.cityName,
          districtName: address.districtName
        }
        if (address.isOpenCertificateInfo) {
          addressData.isOpenCertificateInfo = address.isOpenCertificateInfo
          addressData.certificateRealName = address.certificateRealName
          addressData.certificateType = address.certificateType
          addressData.certificateNumber = address.certificateNumber
        }
        this.$pt.navigateTo({ url: '/pages/personal/address/saveAddress/main?addressObj=' + JSON.stringify(addressData) })
      }
    }
  }
</script>

<style lang='less' scoped>
  .panel-cb-pl{
    background: #fff;
    border-radius: 10px;
    padding: 13px 15px 11px 15px;
    margin-top: 10px;
  }
  .c-cb-wr{
    color: #FF243D;
  }
  .icon-next-a{
    color: #898989;
  }
  .label-ad-sp{
    display: inline-block;
    vertical-align: top;
  }
  .label-2{
    background: #FFEAEC;
    border-radius: 3px;
    color: #FF243D;
  }
  .label-3 {
    background: #FFEAEC;
    border-radius: 3px;
    color: #FF243D;
  }
  .label-1 {
    background: #E6F0FF;
    border-radius: 3px;
    color: #0066FF;
  }
  .label-4 {
    background: #EBEDFF;
    border-radius: 3px;
    color: #7427FF;
  }
  .goods-title {
    height: 25px;
    overflow: hidden;
  }
  .total-info{
    .border-b{
      border-bottom: #f4f4f4 1px solid;
    }
  }
  .font-color-bo{
    color: #B0B0B0;
  }
  .img-item {
    width: 70px;
    height: 70px;
    border-radius: 2px;
  }

  .bottom-btn {
    width: 100%;
    height: 45px;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    z-index: 990;
  }

  .total {
    width: 60%;
  }

  .submit {
    width: 40%;
    color: #fff;
    background-color: red;
  }

  .get-form-id {
    position: absolute;
    width:150px;
    height:40px;
    z-index: 999;
  }
  .container{
    padding-bottom: 100rpx;
    .head-content{
      background: white;
    }
    .head-content-post{
      padding: 12px 16px;
      .left-box{
        .memberinfo{
          min-height: 24px;
        }
      }
    }
    .head-layer-content{
      position: fixed;
      left: 0;
      top: 120px;
      width: 100%;
      height: 100%;
      text-align: center;
      z-index: 30;
      &.head-3{
        top: 165px;
      }
      .head-arrow{
        display: block;
        margin: 0 auto;
      }
      .apply-dialog{
        background-color: white;
        width: 290px;
        margin: 0 auto;
        border-radius: 8px;
        overflow: hidden;
        line-height: 1;
        position: relative;
        z-index: 2100;
        text-align: center;
        .apply-dialog-head{
          height: 37px;
          width: 37px;
          border-radius: 50%;
          display: block;
          margin: 16px auto 0 auto;
        }
        .apply-dialog-title{
          text-align: center;
          color: #343434;
          font-size: 15px;
        }
        .apply-dialog-t-short{
          text-align: center;
          color: #666;
          font-size: 15px;
          font-weight: bold;
        }
        .apply-dialog-info{
          display: flex;
          flex-direction: column;
          align-items: center;
          // justify-content: center;
          color: #666;
          padding: 26px 0 0 0;
          box-sizing: border-box;
          line-height: 1.5;
          min-height: 136px;
          width: 100%;
          border-radius: 5px;
          margin: 0px auto;
          &.content-small{
            font-size: 11px;
            color: #b5b5b5;
          }   
        }
        .bottom-btn{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          border-top: #f6f6f6 1px solid;    
          .cancel-btn{
            background-color: #fff;
            color: #666;
            font-size: 16px;
            height: 44px;
            line-height: 44px;
            text-align: center;
          }
          .submit-btn{
            background-color: #fff;
            color: #666;
            font-size: 16px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            &.submit-apply{
              color: #333;
            }
          }
          .border-line{
            width: 1px;
            background-color: #f6f6f6;
          }
        }
      }
    }  
    .head-layer-bg{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 20;
      background: rgba(0, 0, 0, 0.6);
    }
    .head-bar{
      position: relative;
      z-index: 21;
      .address-bar{
        max-height: 36px;
        line-height: 1.5;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        word-break:break-word;
      }      
      .head-content-self{
        padding: 14px 8px 15px;
        .address-info{
          border-bottom: 1px solid #ededed;
          .func-bar{
            display: flex;
            justify-content: space-around;
            align-items: center;
          }
        }
        .relation-phone{
          padding: 5px 13px 5px 11px;
          border: 1px solid #ededed;
          border-radius: 20px;
        }
      }
    }
    .shop-bar{
      .biz-title{
        border-bottom: #f4f4f4 1px solid;
      }
      .shop-list{
        margin-bottom: 20px;
        &:last-child{
          margin-bottom: 0;
        }
        .hint-box {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          align-items: center;
          width: 100%;
          &>span:nth-child(1) {
            color:#f00
          }
        }
      }
      .sku-detail{
        background: #f8f8f8;
        border-radius: 4px;
        margin-bottom: 8px;
        &:last-child{
          margin-bottom: 0;
        }
      }
      .order-row{
        img{
          border-radius: 4px;
        }
        .shop-title{
          max-height: 45px;
          line-height: 1.5;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-line-clamp:2;
          -webkit-box-orient:vertical;
          word-break:break-word;
        }
        /deep/ .van-stepper__input-wrapper{
          height: 16px;
          width: 59px;
          font-size: 11px;
          color: #333;
          background: #f5f5f5;
        }
        /deep/ .van-stepper__minus,
        /deep/ .van-stepper__plus{
          height: 16px;
          width: 16px;
          color: #333;
          background: #f5f5f5;
          margin: 0 5px;
        }
      }
      .line-1{
        line-height: 1.4;
      }
      .line-2 {
        line-height: 1.4;
        height: unset;
      }
    }
    .relation-bar{
        background: white;
        border-radius: 7px;
        margin-top: 8px;
        padding: 12px 8px;
        .relation-phone{
            padding: 5px 13px 5px 11px;
            border: 1px solid #ededed;
            border-radius: 20px;
        }
        .img-box{
            border-radius: 50%;
            background: yellow;
            border-radius: 50%;
            overflow: hidden;
        }
    }
    .total-bar{
      background: white;
      position: fixed;
      width: 100%;
      height: 50px;
      left: 0;
      bottom: 0;
      z-index: 9;
      .confirm-btn{
        height: 50px;
        width: 142px;
        line-height: 50px;
        font-size: 16px;
        color: #fff;
        border-radius: 0;
        // background: linear-gradient(to right, #ff8e4b, #ff4e25);
        &:after{
          border: unset;
          content: '';
          display: none;
        }
      }
    }
    .hint-bottom-box {
      position: fixed;
      bottom: 100rpx;
      left: 0;
      background: #FDEAE5;
      font-size: 24rpx;
      color: #797979;
      width: 100%;
      padding: 10rpx;
      span {
        color: #EC3B1F;
      }
    }
}
.taobao-icon {
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  display: inline-block;
  color: #fff;
  background: #FD6732;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 4px;
}
</style>
